import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useLanguage } from "@/contexts/LanguageContext";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const sidebarItems = [
  { name: "技能列表", icon: "📚" },
  { name: "作业列表", icon: "📝" },
  { name: "同学列表", icon: "👥" },
  { name: "打分记录表", icon: "📊" },
  { name: "评分查询", icon: "🔍" },
];

interface SidebarProps {
  onSelectItem: (item: string) => void;
}

export function Sidebar({ onSelectItem }: SidebarProps) {
  const { language, setLanguage, t } = useLanguage();

  return (
    <div className="w-64 bg-white border-r flex flex-col h-full">
      <ScrollArea className="flex-grow">
        <div className="p-4 space-y-4">
          <h2 className="text-xl font-bold mb-4">{t("数据整理")}</h2>
          {sidebarItems.map((item) => (
            <Button
              key={item.name}
              variant="ghost"
              className="w-full justify-start text-left"
              onClick={() => onSelectItem(t(item.name))}
            >
              <span className="mr-2">{item.icon}</span>
              {t(item.name)}
            </Button>
          ))}
        </div>
      </ScrollArea>
      <div className="p-4 border-t">
        <Select
          value={language}
          onValueChange={(value: "zh" | "en") => setLanguage(value)}
        >
          <SelectTrigger className="w-full">
            <SelectValue placeholder={t("语言")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="zh">{t("中文")}</SelectItem>
            <SelectItem value="en">{t("英文")}</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}
